<template>
  <!-- <div ref="chartRef" v-loading="loadingRef" :style="{ height, width }"></div> -->
  <Bar class="chart" :loading="loadingRef" :chartData="chartData" />

</template>
<script lang="ts"
  setup>
  import { ref } from 'vue';

  import { getChartData } from '@/api/dataReport/energyComparison'
  import Bar from '@/components/Charts/Bar/index.vue'
  import { cloneDeep } from 'lodash-es';

  const loadingRef = ref(true)
  const emptyData = {
    xaxisList: [],
    yaxisList: [],
  }
  const chartData = ref(cloneDeep(emptyData))


  const getData = (searchInfo) => {
    loadingRef.value = true;
    // 数据环比
    getChartData(searchInfo).then(res => {
      chartData.value = res
    }).catch(e => {
      chartData.value = cloneDeep(emptyData)
    }).finally(() => {
      loadingRef.value = false;
    })
  }
  defineExpose({
    getData
  })
</script>
